<template>
  <div>
    <van-nav-bar
        title="基本信息"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
  </div>
  <!--  头像-->
  <div class="head">
    <van-cell class="q1" title="头像" is-link @click="tou">
      <template #value>
        <van-image
            width="54"
            height="54"
            :src=store.user.avatar
        />
      </template>
    </van-cell>
    <!--    弹出上传图片-->
    <van-popup v-model:show="show" :style="{ padding: '64px' }">
      <van-uploader :after-read="afterRead"/>
    </van-popup>

    <van-cell class="q2" title="昵称" is-link @click="to">
      <template #value>
        {{ store.user.nickname }}
      </template>
    </van-cell>

    <!--    弹出修改名字-->
    <van-popup v-model:show="showTo" position="top" :style="{ height: '25%', borderRadius: '0 0 15px 15px' }">
      <div class="field">
        <van-form @submit="onS">
          <van-cell-group inset>
            <van-field
                v-model="store.user.nickname"
                name="昵称"
                label="用户名:"
                placeholder="用户名"
                :style="{ border: '1px solid #ccc' }"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <van-cell class="q3" title="生日" is-link @click="sdata">
      <template #value>
        {{ store.user.birth }}
      </template>
    </van-cell>
<!--    修改日期-->
<!--    <van-popup v-model:show="showdata" position="bottom" :style="{ height: '40%', borderRadius: '15px 15px 0 0' }">-->
<!--    <van-date-picker-->
<!--        v-model="currentDate"-->
<!--        title="选择日期"-->
<!--        :min-date="minDate"-->
<!--        :max-date="maxDate"-->
<!--    />-->
<!--    </van-popup>-->
    <van-cell class="q4" title="更多信息" is-link value="内容">
      <template #value>
        完善有奖
      </template>
    </van-cell>
    <van-cell class="q5" title="账号安全" is-link value="内容">
      <template #value>
        {{ store.user.phone }}
      </template>
    </van-cell>

  </div>
  <!--  推出登录-->
  <div class="out">
    <p>退出登录</p>

  </div>

</template>

<script setup>


import {useStore} from '../../pinia/index.js'
import {onMounted, ref} from 'vue'
import {useRouter} from "vue-router";
import {get, post} from '../../util/request.js'
import axios from "axios";

const router = useRouter();
const onClickLeft = () => {
  history.back()
};

const store = useStore()
const user = store.user
//滑头从
const show = ref(false);
const tou = () => {
  show.value = true;
}
const sx = () => {
  get("my/selectById", {o: 0}).then(r => {
    store.setUser(r.data)

  })
}
//修改昵称
const showTo=ref(false)
const to = () => {
  showTo.value=true
}
const onS=()=>{
  post("my/updateName",store.user).then(r=>{
    showTo.value=false
  })

}
//修改日期
const showdata=ref(false)
const sdata = () => {
  showdata.value=true
}

//上传图片
const afterRead = (file) => {
  const formData = new FormData()
  formData.append('file', file.file)
  console.log(formData)
  axios.post("http://39.106.55.36:9099/my/loadPicture", formData).then(r => {
    user.avatar = r.data
    store.setUser(user)
    show.value = false;
    sx();
    console.log(r.data)
  })
}
</script>

<style scoped>
.head {
  position: absolute;
  top: 37px;
  left: 10px;
  right: 10px;
  background-color: #f1efef;
  width: auto;
  height: 885px;
  padding-top: 10px;
  text-align: left;
}

.q1 {
  height: 70px;
  margin-bottom: 1px;
  align-items: center; /* 垂直居中 */
}

.q2, .q3, .q4, .q5 {
  height: 70px;
  margin-bottom: 1px;
  align-items: center; /* 垂直居中 */

}

.q1 {
  align-items: center; /* 垂直居中 */
}

/*推出登录*/
.out {
  position: absolute;
  top: 432px;
  left: 188px;
  border-bottom: 2px solid #dbd3d3;
  padding-bottom: 2px;
}

p {

  margin: auto;
  color: #888888;
  font-size: 13px;
}
/*//修改昵称*/
.field{
  position: absolute;
  top: 55px;
  left: 40px;
}


</style>
